Stage 2: Configure the stylesheet

Next we build a stylesheet for the Page View using a combination of XHTML and XSLT. The complete W3C specification for XSLT is available at www.w3c.org/tr/xslt.

Our example is quite simple and is based on the W3C's Literal Result Element as Stylesheet specification. Before we proceed with building the stylesheet, consider this illustration taken from the W3C specification:

<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/xhtml1/strict">

	<head>

		<title>Expense Report Summary</title>

	</head>

	<body>

		<p>Total Amount: <xsl:value-of select="expense-report/total"/></p>

	</body>

</html>

Note the following:

The xsl:version attribute must be added to the opening <html> tag; this indicates the XSL version that the stylesheet requires. Simply copy and paste this as is.
The page and text is formatted using standard XHTML tags.
The XSLT value-of element together with the select attribute define the pathway to and name of the data to be used by the Page View (information that is found in the xmldata.xml file created in the previous Stage).

Configuring a stylesheet for the Page View is done with a combination of XHTML and XSLT and can be achieved using an XSL editor or a WYSIWYG web development tool.

Tip: If you wish to modify sample code rather than creating a stylesheet from scratch, proceed to Use the Sample Code below. It may however be worth looking at Use an XSL Editor in order to understand how a stylesheet is created.

Use an XSL Editor

In this example, Cooktop is used:

If using Cooktop, select the stylesheet(xsl) tab.
The stylesheet requires an opening <html> and a closing </html> tag and the opening tag must include the xsl:version attribute:
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/xhtml1/strict">
</html>
Use XHTML tags to define the layout and look of the Page View.
Note: It is important when using HTML tags that they have an opening and closing tag.
You can define a title (in this example Parties Page View) and must define a body. In the body, add the field labels and any label formatting to display in the Page View:
```
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/xhtml1/strict">
```
```
	<title>Parties Page View</title>
```
```
 	<body>
```
```
 		Given Name: 
```
```
 		Surname: 
```
```
 	</body>
```
```
</html>
```
Note: The   tag denotes a line break.
The XSLT value-of element and select attribute together define the pathway to and name of the data that will be displayed in the Page View. These are placed between the opening <body> and closing </body> tags:
```
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/xhtml1/strict">
```
```
 <title>Parties Page View</title>
```
```
 	<body>
```
```
	 	Given Name: <xsl:value-of select="/table/tuple/atom[@name='NamFirst']"/>
```
```
		Surname: <xsl:value-of select="/table/tuple/atom[@name='NamLast']"/>
```
```
	</body>
```
```
</html>
```
Tip: If one of the fields you included in your report is a nested table (e.g. Other Names: (Person Details)), see How to manage a nested table below.
The value used by the select statement (after the equals sign) is taken from the xmldata.xml file. The relevant section is enclosed by the <table> tags and defines the hierarchical path to the value (atom):
```
<table name="eparties">
```
```
	
```
```
	<tuple>
```
```
		<atom name="NamFirst">Gerard</atom>
```
```
		<atom name="NamLast">Wood</atom>
```
```
	</tuple>
```
```
</table>
```
To display the NamFirst value beside the Given Name label, first:
1. Map the path to the value from the opening table tag: /table/tuple/atom
2. Specify the attribute in the format: [@name='NamFirst']
3. Enclose the entire statement in double quotes:
Given Name: <xsl:value-of select="/table/tuple/atom[@name='NamFirst']"/>
How to manage a Nested table
If you include a field in your Page View that is a nested table (that is a single field with more than one value, Other Names: (Person Details) for example), it is necessary to include a simple loop when configuring the stylesheet at Stage 2.
When you add a nested table field to the Report Properties box (at Step 6), it displays with the following table icon :
The loop is defined with the xsl:for-each element.
When the report is run, the xmldata.xml file will appear as follows:
Again we must map the hierarchical path to each atom. The loop is specified using the xsl:for-each element:
```
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/xhtml1/strict">
```
```
	<title>Other Names</title>
```
```
	<body>
```
```
		Given Name: <xsl:value-of select="/table/tuple/atom[@name='NamFirst']"/> 
```
```
		Surname: <xsl:value-of select="/table/tuple/atom[@name='NamLast']"/> 
```
```
		<xsl:for-each select="/table/tuple/table/tuple">Other Names : 
```
```
			<xsl:value-of select="atom[@name='NamOtherNames']"/> 
```
```
		</xsl:for-each>
```
```
	</body>
```
```
</html>
```
This gives us:
Save the stylesheet and attach it to the Page View defined in EMu (as in Stage 3).
Now when the Page View is selected (View>Page Settings>Choose Page), the Page View displays as:
This gives us:
Save the stylesheet. In this example the file is saved as xmldata.xsl.

In the final Stage we attach the new stylesheet to the Page View (report) defined in Stage 1.

➤